
<template>
  <div>
    <Suspense>
      <template #default>
        <!-- 组件加载完成时候调用 -->
        <A></A>
      </template>
      <template #fallback>
        <!-- 组件加载的时候调用，加载完成后就会替换掉 -->
        <div>
          loading...
        </div>
      </template>

    </Suspense>
  </div>
</template>

<script setup lang="ts">
// import A from './components/A/index.vue'  // 改成异步组件，不能这么引入，数据显示不出来
import { ref, defineAsyncComponent } from 'vue'
const name = ref<string>('header')


const A = defineAsyncComponent(() => import('./components/A/index.vue'))  // 引入后，还需要配合suspense使用
// 只能通过import函数形式引入，单遇到awite的时候，把我们的逻辑拆分出去，打包的时候就多包


</script>



<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
